var Data;
var province=document.getElementById("province");
var year=document.getElementById("year");
var main = document.getElementsByClassName('main')[0];


province.addEventListener("click",provinceStatistic);
year.addEventListener("click",yearStatistic);



function provinceStatistic(){
  main.innerHTML = "";
  var newDiv = document.createElement('div');
  newDiv.id="pro";
  main.appendChild(newDiv);
  url="/data/dataVisualProvince";
  fetch(url, {
    method: 'GET',
  })
    .then(response => {
      if (response.ok) {
        return response.json(); // 解析响应数据为 JSON
      } else {
        throw new Error('网络错误');
      }
    })
    .then(data => {
      Data=data;
      var pie_chart = echarts.init(document.getElementById('pro'));

      // 配置图表的参数
      var option = {
        // 设置图表的标题
        title: {
          text: '各省份灾情次数统计'
        },
        // 设置玫瑰图的系列数据
        series: [{
          type: 'pie',
          radius: '55%',
          roseType: 'angle',
          data: Data.map(item => ({ name: item.province, value: item.count }))
        }]
      };
    
      // 使用刚指定的配置项和数据显示图表
      pie_chart.setOption(option);
    })
    .catch(error => {
      console.error('获取数据时出现错误:', error);
    });
}


//饼图
// 假设数据格式为一个包含省份和灾情次数的数组
// var data = [
//     { province: '浙江', count: 10 },
//     { province: '甘肃', count: 5 },
//     {province:'北京',count:9},
//     {province:'上海',count:6},
//     {province:'河南',count:8}
//   ];

function yearStatistic(){
  main.innerHTML = "";
  var newDiv = document.createElement('div');
  newDiv.id="yea";
  main.appendChild(newDiv);
  url="/data/dataVisualization";

  fetch(url, {
    method: 'GET',
  })
    .then(response => {
      if (response.ok) {
        return response.json(); // 解析响应数据为 JSON
      } else {
        throw new Error('网络错误');
      }
    })
    .then(data => {
      Data=data;
      // 初始化 ECharts 实例
      var curve_chart = echarts.init(document.getElementById('yea'));

      // 配置图表的参数
      var option = {
        // 设置图表的标题
        title: {
          text: '年份和灾情发生次数统计'
        },
        // 设置图表的 x 轴和 y 轴
        xAxis: {
          type: 'category',
          data: Data.map(item => item.year) // x 轴数据为年份
        },
        yAxis: {
          type: 'value',
          name: '灾情发生次数' // y 轴显示的名称
        },
        // 设置图表的系列数据
        series: [{
          type: 'line',
          data: Data.map(item => item.count) // y 轴数据为灾情发生次数
        }]
  };

  // 使用刚指定的配置项和数据显示图表
  curve_chart.setOption(option);
    })
    .catch(error => {
      console.error('获取数据时出现错误:', error);
    });
}






  // //折线图
  // var data1 = [
  //   { year: 1999, frequency: 10 },
  //   { year: 2000, frequency: 5 },
  //   { year: 2001, frequency: 8 },
  //   // ...
  // ];

  